<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="博客,技术,PHP,Mysql,Html,Css,Ajax,服务器,Js,数据库,网站,微信公众号,小程序" />
    <meta name="description" content="Alinejun - 个人技术博客，专注码农的世界" />
    <title>Alinejun - 个人技术博客</title>
    <link rel="icon" href="__IMG__/favicon.ico">
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/head.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/base.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/index.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/iconfont.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <!-- head -->
    <div class="container-fluid" style="padding: 0px">
        <div class="header">
            <!-- header -->
            {:widget('Common/header')}
            <!-- /header -->

            <!-- category -->
            {:widget('Common/category')}
            <!-- /category -->
        </div>
    </div>
    <!-- head -->

	<!-- itemGrid for hot -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-md-9 box-left">

                <!-- itemBox 头条 -->
                <div class="main-mess cont-box" style="padding:0px 20px;margin: 0px;">
                    <div class="title">
                        <h1>留言板 / Message</h1>
                        <p>业精于勤，荒于嬉；行出成于出，毁于随</p>
                    </div>
                    <!-- <div class="line"></div> -->
                    <div class="bbs">
                        <form class="form-inline">
                            <div class="author">
                                {if $member == null}
                                    <a href="{:url('index/login/index')}" class="btn btn-default btn-sm" style="border:1px solid #999">登录</a>
                                {else\}
                                    <div class="usergroup">
                                        <img src="__ROOT__{$member.headpic}" class="img-circle" alt="{$member.nickname}" width="40">
                                        <span>&nbsp;&nbsp;Author：&nbsp;&nbsp;{$member.nickname}</span>
                                    </div>
                                {/if}
                                <select name="status" class="form-control input-sm">
                                  <option value="1">公开显示</option>
                                  <option value="-1">隐藏</option>
                                </select>
                            </div>
                            <textarea name="content" class="form-control" style="width: 100%" rows="6">{if $member == null}请登录..{/if}</textarea>
                            <p class="sub"><button type="button" class="btn btn-success">提交留言</button></p>
                        </form>
                    </div>
                    <div class="detail titlebar">
                        <div class="head">
                            <h3><b>全部留言</b></h3>
                        </div>
                        
                        <div class="mess-group">
                            {volist name="list" id="vo" length="5"}
                            <div class="item">
                                <div class="author">
                                    <img src="__ROOT__{$vo.userinfo.headpic}" class="img-circle" alt="" width="40">
                                    <span>{$vo.userinfo.nickname}</span>
                                </div>
                                <div class="cont">
                                    {if $vo['status'] == -1}
                                        <div class="info">该留言已被隐藏...</div>
                                        <p class="time">{$vo.create_time}</p>
                                    {else/}
                                        <div class="info">{$vo.content|raw}</div>
                                        <p class="time">{$vo.create_time}</p>
                                    {/if}
                                    
                                </div>
                                {if $vo['reply'] != '' AND $vo['status'] == 1}
                                {volist name="$vo.reply" id="va"}
                                <div class="reply">
                                    <div class="line"></div>
                                    <p class="editor">管理员回复：</p>
                                    <div class="info">{$va.content|raw}</div>
                                    <p class="time">
                                        <span>{$va.create_time}</span>
                                    </p>
                                </div>
                                {/volist}
                                {/if}
                            </div>
                            {/volist}
                        </div>
                        
                    </div>
                    
                    <div class="more">
                    	{if $count > 5}
                        <a href="javascript:;" id="view-more">查看更多</a>
                    	{/if}
                    </div>        
                </div>                    
                <!-- itemBox 头条 -->
            </div>
            <div class="col-sm-4 col-md-3 box-right">

                <!-- news -->
                {:widget('Common/news')}
                <!-- /news -->

                <!-- labels -->
                {:widget('Common/labels')}
                <!-- /labels -->
                            
                <!-- comment -->
                {:widget('Common/comment')}
                <!-- /comment -->
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <!-- footer -->
    {:widget('Common/footer')}
    <!-- /footer -->

    <script type="text/javascript" src="__JS__/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.ripples.js"></script>
    <script type="text/javascript" src="__JS__/base.js"></script>
    <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>

    <script type="text/javascript">
        $(function(){
        	// 留言
            $(".bbs .sub button").click(function(){
                $.ajax({
                    url:'/index/message/addmess',
                    data:$("form").serialize(),
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if (data.status == -1) {
                            layer.msg(data.msg);
                        }else{
                            layer.alert(data.msg, function(){
                                location.reload();
                            });
                        }
                    }
                })
            })

            // 查看更多
            var page = 1;
            var size = 5;
            $("#view-more").click(function(){
				var index = layer.load(2);

            	if ($(this).hasClass("disabled")) {
            		layer.close(index);
            		return;
            	}
                $.ajax({
                    url:'/index/message/more',
                    data:{'page':page,'size':size},
                    type:'post',
                    dataType:'json',
                    success:function(data){
                    	var ht = '';
                    	layer.close(index);
                        if (data == 3) {
                        	$("#view-more").text("加载完毕");
                        	$("#view-more").addClass("disabled");
                        }else{
                        	for (var i = 0; i < data.length; i++) {
                    			ht += '<div class="item">';

                        		ht +='<div class="author"><img src="__ROOT__'+data[i].userinfo.headpic+'" class="img-circle" alt="" width="40"><span>'+data[i].userinfo.nickname+'</span></div>';
                        		ht +='<div class="cont">';
                        		if (data[i].status == -1) {
									ht +='<div class="info">该留言已被隐藏...</div><p class="time">'+data[i].create_time+'</p></div>';
                        		}else{
									ht +='<div class="info">'+data[i].content+'</div><p class="time">'+data[i].create_time+'</p></div>';
                        		}

                        		// 回复
                        		if (data[i].reply) {
                        			var list = data[i].reply;
                        			for (var j = 0; j < list.length; j++) {
                        				ht += '<div class="reply"><div class="line"></div><p class="editor">管理员回复：</p><div class="info">'+list[j].content+'</div><p class="time"><span>'+list[j].create_time+'</span></p></div>';
                        			}
                        		}

                        		ht +='</div>';
                        	}

                        	console.log(ht);
                        	$(".mess-group").append(ht);
                        	page++;
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>